import * as d3 from 'd3'
export class Rect {
  chart = {}
  constructor(divId, vue) {
    this.divId = divId
    this.vue = vue
    this.initChart()
  }
  draw(mainIndex) {
    this.drawChart(mainIndex)
  }
  initChart() {
    this.chart.padding = {
      left: 20,
      right: 50,
      top: 20,
      bottom: 10
    }
    this.chart.divHeight = document.getElementById(this.divId).offsetHeight
    this.chart.divWidth = document.getElementById(this.divId).offsetWidth
    this.chart.svg = d3.select('#' + this.divId).append('svg')
      .attr('width', this.chart.divWidth)
      .attr('height', this.chart.divHeight)
      .attr('class', 'topChart')

    this.chart.svg.append('text')
      .attr('font-size', 12)
      .attr('x', this.chart.divWidth / 4)
      .attr('y', 12)
      .text('污染最严重的城市TOP20')
  }
  drawChart(mainIndex) {
    let color = function(i) {
      // let mycolor = ['#949483', '#f47b7b', '#9f1f5c', '#ef9020', '#00af3e',
      //   '#85b7e2', '#29245c', '#ffd616', '#e5352b', '#e990ab', '#0081b4',
      //   '#96cbb3', '#91be3e', '#39a6dd']
      let newColor = ['#8db5d3', '#f7c3b0', '#a1ede9', '#ffa05a', '#c492fd', '#3baeff',
        '#aed8ff', '#69bcaf', '#f2e280', '#d4cff7', '#fa8170', '#8f89ff', '#93d47f', '#ffc34e']
      return newColor[i % 14]
    }

    let yScale = d3.scaleBand()
      .domain(mainIndex.map(d => d.city_name))
      .range([this.chart.padding.top, this.chart.divHeight - this.chart.padding.bottom])
    let xScale = d3.scaleLinear()
      .domain([0, d3.max(mainIndex, d => d.main_index)])
      .range([this.chart.padding.left, this.chart.divWidth - this.chart.padding.right])
    let yAxis = d3.axisLeft(yScale)

    this.chart.svg.select('.cityAxis').remove()
    this.chart.svg.append('g')
      .attr('transform', 'translate(' + this.chart.padding.left * 2 + ',' + 0 + ')')
      .attr('class', 'cityAxis')
      .call(yAxis)
      .attr('font-size', 8)

    let g
    if (this.chart.svg.select('.tops').empty()) {
      g = this.chart.svg.append('g')
        .attr('class', 'tops')
    } else {
      g = this.chart.svg.select('.tops')
    }

    let gTop = g.selectAll('.topCity')
      .data(mainIndex, d => d.city_name)

    gTop.select('rect')
      .transition()
      .duration(750)
      .attr('y', d => {
        return yScale(d.city_name)
      })
      .attr('width', d => {
        return xScale(d.main_index) - xScale(0)
      })
      .style('fill', d => color(d.category))

    gTop.select('text')
      .transition()
      .duration(750)
      .attr('x', d => (xScale(d.main_index) - xScale(0)))
      .attr('y', d => yScale(d.city_name) + yScale.bandwidth() * 0.5)
      .text(d => d.main_index)

    let enterNode = gTop.enter()
      .append('g')
      .attr('class', 'topCity')

    enterNode.append('rect')
      .attr('x', xScale(0) + this.chart.padding.left)
      .attr('y', d => {
        return yScale(d.city_name)
      })
      .attr('width', 0)
      .attr('height', yScale.bandwidth() * 0.9)
      .style('fill', d => color(d.category))
      .style('opacity', 0.6)
      .on('click', (_, d) => {
        this.vue.chart.mapChart.renderCityWind(d.city_name)
        this.vue.chart.parallelChart.filterByCluster([d.city_name], 'city_name')
        this.vue.chart.steelChart.selectedCity([d.city_name])
      })
      .transition()
      .duration(750)
      .attr('width', d => {
        return xScale(d.main_index) - xScale(0)
      })

    enterNode.append('text')
      .attr('font-size', 10)
      .attr('x', this.chart.padding.left)
      .attr('y', d => yScale(d.city_name) + yScale.bandwidth() * 0.5)
      .transition()
      .duration(750)
      .attr('x', d => (xScale(d.main_index) - xScale(0)))
      .text(d => d.main_index)

    let exitNode = gTop.exit()
    exitNode.transition()
      .duration(750)
      .attr('y', this.chart.divHeight)
      .remove()
  }
  render() {
    // console.log(ticks)
    // for (var j = 0; j < mainIndex.length; j++) {
    //   var end = parseFloat(mainIndex[j].rate)
    //   // console.log(end)
    //   if (end < 0) {
    //     end = (-end) / 100
    //     var arcge = d3.arc()
    //       .innerRadius(0)
    //       .outerRadius(10)
    //       .startAngle(0)
    //       .endAngle(Math.PI * 2 * end)
    //     this.chart.svg.append('path')
    //       .attr('d', arcge)
    //       .attr('fill', 'green')
    //       .attr('transform', 'translate(' + xticks[j] + ',' + ticks[j] + ')')
    //   } else {
    //     end = end / 100
    //     var arcge1 = d3.arc()
    //       .innerRadius(0)
    //       .outerRadius(10)
    //       .startAngle(0)
    //       .endAngle(Math.PI * 2 * end)
    //     this.chart.svg.append('path')
    //       .attr('d', arcge1)
    //       .attr('fill', 'red')
    //       .attr('transform', 'translate(' + xticks[j] + ',' + ticks[j] + ')')
    //   }
    // }
  }
}
